<template>
    <div class="layout heightStyle">
        <Row type="flex" class="heightStyle">
            <Col span="24">
            <div class="layout-header">
                <div class="title">基于元数据的集成模型</div>
                <!-- <div class="userCenter">
                  <el-dropdown trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link userCenter">
                      个人中心
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="loginOut">退出登陆</el-dropdown-item>
                      <el-dropdown-item command="modifyPassword">修改密码</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div> -->
                <div class="userCenter">admin 你好!</div>
            </div>
            <!--内容和导航栏-->
            <div class="layout-content heightStyle">
              <!--导航栏-->
              <div class="bread-content">
                <el-menu
                active-text-color="#409EFF"
                theme="dark"
                :default-active="activeIndex"
                class="el-menu-vertical-demo"
                mode="horizontal"
                @select="handleSelect">
                    <router-link to="/dashboard/DataMapManagement/DataMap">
                        <el-menu-item index="1" class="des">数据地图</el-menu-item>
                    </router-link>
                    <router-link to="/dashboard/MetaDataManagement/MetaData">
                        <el-menu-item index="2" class="des">元数据</el-menu-item>
                    </router-link>
                    <router-link to="/dashboard/MetaDataCollectManagement/DataSource">
                        <el-menu-item index="3" class="des">元数据采集</el-menu-item>
                    </router-link>

                    <el-menu-item index="4" @click="MetaDataAction" class="des">元模型</el-menu-item>
                    <router-link to="/dashboard/ETLTaskManagement/ETLTask">
                        <el-menu-item index="5" class="des">ETL</el-menu-item>
                    </router-link>
                    <router-link to="/dashboard/SystemManagement/System">
                        <el-menu-item index="6" class="des">系统</el-menu-item>
                    </router-link>

                </el-menu>
              </div>
              <!-- 内容区域-->
              <div class="layout-content-main">
                  <router-view></router-view>
              </div>
            </div>
            <!-- 底部-->
            <div class="layout-footer"></div>
        </Col>
    </Row>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
export default {
    data() {
      return {
        user: {},
        activeIndex: ''//导航栏激活的下标
      }
    },
    created () {
      this.initData ()
    },
    methods: {
      initData () {
        //取出用户名和密码
        this.user = this.$store.state.user
        console.log(this.user)
        //取出导航栏下标
        this.activeIndex = this.$store.state.activeIndex
        console.log(this.activeIndex)
      },
      handleSelect(key, keyPath) {
        this.$store.state.activeIndex = key
        this.activeIndex = key
        console.log(this.$store.state.activeIndex)
      },
      //个人中心相关接口请求
      handleCommand(command) {
        let vm = this
        if (command == 'loginOut') {
          console.log(command)
          //退出登录接口
          axios.get('http://116.62.196.234:80/MT/systemusercontroller/logout')
          .then(function (response) {
            //请求服务器成功
            //请求过session
            console.log(response)
            if (response.data.result == true) {
              //退出成功，路由跳转
              vm.$router.push({path: '/login'})
            } else {
              //退出失败，做出提示
              vm.$alert('退出登录失败，请重试', '提示', {
                confirmButtonText: '确定'
              })
            }
          })
          .catch(function (error) {
            //请求服务器失败
            //没有请求过session
            console.log(error)
          })
        } else {
          console.log(command)
          //修改密码接口
          }
        },
        // 在元模型标签的点击事件，用于获取tree控件的数据
      MetaDataAction () {
            // console.log(key, keyPath);
            let vm = this
            axios.get('metamodel_hierarchy/getMetamodelPackageTree')
            .then(function (response) {
                console.log(response)
                console.log(response.data.data)
                if (response.data.result == true) {
                    vm.$router.push({
                        name: '元模型',
                        params: {
                          metaMedelData: response.data.data

                      }
                  })
                } else {
                    vm.$router.push({
                        name: '元模型',
                        params: {
                          metaMedelData: ' '
                      }
                  })
                }
            })
            .catch(function (error) {
                console.log(error);
            });
        }
    }
  }
</script>
<style scoped>
.des {
  font-size: 18px;
}
.heightStyle {
  height: 100%;
}
.layout{
    /* border: 1px solid #d7dde4; */
    background: #f5f7f9;
    position: relative;
    height: 100%;
}
.layout-breadcrumb{
    padding: 10px 15px 0;
}
.layout-content{
    min-height: 200px;
    margin: 0px;
    overflow: hidden;
    background: #fff;
    border-radius: 4px;
}
.layout-content-main{
    padding: 10px;
    height: 100%;
}
.layout-header{
    height: 100px;
    background: #24292e;
    font-size:30px;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
    padding-top: 30px;
}
.title{
    margin-left: 10px;
    color: #fff;
    display: inline;
}
.userCenter {
  font-size:16px;
  color: #fff;
  float: right;
  margin-right: 15px;
}
.layout-footer{
    height: 60px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
.bread-content{
    font-size: 60px;

}
.el-menu-demo{
    /* background-color: #fff; */
    background-color: #e1e4e8;
    font-size: 40px;   /*可以设置加粗但是不可以把字号变了，也是奇怪*/
    font-weight:bold;
    /*height:30px;*/
}
</style>
